import { ComponentProps, Hook, Mut, VueComponent } from "vue3-oop"
import { Collapse, CollapsePanel, Row, Col } from 'ant-design-vue';
import FvrWidget from '../fvr-widget'

import moduleCss from './fvr-collapse.module.scss'
import { WidgetNode } from '../../types/index'

import { COLLAPSE } from '../attr-widget'

interface IProps {
  widgetNode: WidgetNode
}
export default class FvrCollapse extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    widgetNode: {}
  }

  constructor(
  ) {
    super();
  }

  @Mut() state = {
    activeKey: ['COLLAPSE_PANEL']
  }

  render() {
    const { formData, widgetNode } = this.props;
    const widgetItem = widgetNode.widgetItem;
    const attr = widgetItem[widgetItem.type] as COLLAPSE;

    return (
      <Collapse
        activeKey={this.state.activeKey}
        onChange={(values) => { this.state.activeKey = values as string[] }}
        class={[moduleCss['fvr-collapse']]}
      >
        <CollapsePanel header={attr.title} key='COLLAPSE_PANEL' >
          <Row
            // class={[moduleCss['fvr-grid']]}
            style={{
              flexWrap: 'wrap',
              alignContent: 'flex-start',
              minHeight: '56px',
              marginLeft: 'unset',
              marginRight: 'unset'
            }}
            gutter={attr.gutter}
          >
            {this.props.widgetNode?.children?.map((childNode:WidgetNode)=>{
              if(childNode.widgetId){
                const childItem = childNode.widgetItem;
                const childAttr = childItem[childItem.type] as any;
                return(
                  <Col
                    class={[moduleCss['drag-item']]} 
                    {...{
                      style:{
                        height:'unset',
                      }
                    }}
                    {...childAttr.layout_reactive}
                  >
                    <FvrWidget
                      widgetNode={childNode}
                    />
                  </Col>
                )
              }
            })
            }
          </Row>
        </CollapsePanel>
      </Collapse>
    )
  }
}